<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">修改职位</div>
        <div @click="save()">保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>职位名称</span>
        <div>
          <input type="text" v-model="recruit_data.title" placeholder="请输入职位名称" />
        </div>
      </div>
      <div class="inpBox">
        <span>招聘人数</span>
        <div>
          <input type="text" v-model="recruit_data.recruitNum" placeholder="请输入招聘人数" />
        </div>
      </div>
      <div class="inpBox">
        <span>工作时长</span>
        <div>
          <input type="text" v-model="recruit_data.workinghours" placeholder="请输入工作时长" />
        </div>
      </div>
      <div class="inpBox">
        <span>职位薪资</span>
        <div @click="prop(2)">
          <input type="text" v-model="payValue" placeholder="请选择薪资范围" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>学历要求</span>
        <div @click="prop(4)">
          <input type="text" v-model="schoolValue" placeholder="请选择学历要求" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>工作年限</span>
        <div @click="prop(5)">
          <input type="text" v-model="ageValue" placeholder="请选择工作年限" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>工作城市</span>
        <div @click="prop(1)">
          <input type="text" v-model="cityValue" placeholder="请选择工作城市" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>职位种类</span>
        <div @click="prop(0)">
          <input type="text" v-model="postValue" placeholder="请选择职位种类" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>职位类型</span>
        <div @click="prop(3)">
          <input type="text" v-model="stateValue" placeholder="请选择职位类型" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>福利待遇</span>
        <div class="welfareClass">
          <!--          active: item.type === true为true，sql表里的deletestatus就为0，表示启用-->
          <span v-model="recruit_data.welfare" v-for="(item,index) in welfare" :class="{ active: item.type === true }" @click="act(item, index)">{{item.name}}</span>
        </div>
      </div>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>职位描述</span>
        </div>
        <textarea v-model="recruit_data.description" placeholder="请填写职位描述"></textarea>
      </div>
    </div>
    <mt-popup v-model="postIf" position="bottom">
      <!--职位种类-->
      <p class="mt-p">
        <span @click="off(0)">取消</span>
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="post"
        @change="postChange"
        value-key="positionTitle"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="cityIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span> 请选择城市
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker :slots="city" value-key="name" @change="addressChange" class="picker"></mt-picker>
    </mt-popup>
    <mt-popup v-model="payIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="payList"
        @change="payChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="schoolIf" position="bottom">
      <p class="mt-p">
        <span @click="off(4)">取消</span>请选择学历
        <span @click="on(4)">确定</span>
      </p>
      <mt-picker
        :slots="schoolList"
        @change="schoolChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="stateIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择职位类型
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="stateLimit"
        @change="stateChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="ageIf" position="bottom">
      <p class="mt-p">
        <span @click="off(5)">取消</span> 请选择年限
        <span @click="on(5)">确定</span>
      </p>
      <mt-picker
        :slots="ageLimit"
        @change="ageChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import {Popup, Picker, Toast} from 'mint-ui'
import Vue from 'vue'
import threeLevelAddress from '../../assets/address.json'
var postValue = ''
var cityValue = ''
var payValue = ''
var stateValue = ''
var schoolValue = ''
var ageValue = ''
var cityCode = ''
var postCode = ''
var ageCode = ''
var stateCode = ''
var payCode = ''
var schoolCode = ''
export default {
  inject: ['reload'],
  name: 'work',
  components: {Popup, Picker},
  created () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    this.recruit_data.id = localStorage.getItem('currUpdateRecuritId')

    // 获取职位信息
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/comuser/get/recruit/data',
      params: {
        id: this.recruit_data.id
      }
    }).then(({data}) => {
      console.log(data.recruit)
      if (data.recruit) {
        this.recruit_data = data.recruit
        if (data.recruit.welfare) {
          this.recruit_data.welfare = data.recruit.welfare.split(',')
        }

        let citySplice = this.recruit_data.city
        // 回显地区
        let cityData = this.getCountyData(citySplice.substring(0,2) + '0000',
          citySplice.substring(0, 4) + '00', citySplice)
        if (cityData) {
          this.cityValue = cityData.name
        }

        // 回显福利待遇
        let welfareData = this.recruit_data.welfare
        if (welfareData && welfareData.length > 0) {
          welfareData.forEach(item => {
            for (let i = 0; i < this.welfare.length; i++) {
              if ((item - 0) === (this.welfare[i].id - 0)) {
                this.welfare[i].type = true
              }
            }
          })
        }
      }
    })

    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/comuser/get/recruit/dict'
    }).then(({data}) => {
      this.ageLimit = data.wordYear // 工作年限
      this.schoolList = data.edu // 学历
      // this.post = data.positionType // 职位种类
      this.payList = data.scale // 职位薪资
      this.stateLimit = data.recruitType // 职位类型
      // this.city = data.region // 城市
    })
  },
  mounted () {
    this.$http({
      url: this.AppURL + '/userResume/list',
      method: 'post'
    }).then(({data}) => {
      let positionTypeList = data.positionTypeList
      this.post[0].values = positionTypeList
      this.post[2].values = positionTypeList[0].list2
      this.post[4].values = positionTypeList[0].list2[0].list3
    })
  },
  // data() 为变量赋值等
  data () {
    return {
      // status为状态，0是新增，1是修改
      status: localStorage.status,
      state: '',
      postValue: '',
      postIf: false,
      post: [
        {
          flex: 1,
          defaultIndex: 0,
          values: [], //键k，其数组里的名字作为下拉列表的值
          className: 'slot1',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '-',
          className: 'slot2'
        },
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '-',
          className: 'slot2'
        },
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }
      ],
      cityValue: '',
      cityIf: false,
      city: [
        // 省
        {
          flex: 1,
          values: this.getProvinceArr(), // 省份数组
          className: 'slot1',
          textAlign: 'center'
        },
        // 分隔符
        {
          divider: true,
          content: '',
          className: 'slot2'
        },
        // 市
        {
          flex: 1,
          values: this.getCityArr('北京市'),
          className: 'slot3',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '',
          className: 'slot4'
        },
        // 县
        {
          flex: 1,
          values: this.getCountyArr('北京市', '北京市'),
          className: 'slot5',
          textAlign: 'center'
        }
      ],
      payValue: '',
      payIf: false,
      payList: [
        {
          values: []
        }
      ],
      pay: [
        {
          values: []
        }
      ],
      stateValue: '',
      stateIf: false,
      stateLimit: [
        {
          values: []
        }
      ],
      schoolValue: '',
      schoolIf: false,
      schoolList: [
        {
          values: []
        }
      ],
      ageValue: '',
      ageIf: false,
      ageLimit: [
        {
          values: []
        }
      ],
      regionInit: false,
      welfare: [
        {id: 1, name: '五险一金', type: false},
        {id: 2, name: '双休', type: false},
        {id: 3, name: '有车补', type: false},
        {id: 4, name: '有餐补', type: false},
        {id: 5, name: '管住宿', type: false},
        {id: 6, name: '有提成', type: false},
        {id: 7, name: '法定节假日', type: false},
        {id: 8, name: '项目奖金', type: false}
      ],
      recruit_data: {
        id: null,
        companyId: null,
        title: '',
        workYear: '',
        eduBgd: null,
        positionId: '',
        recruitNum: '',
        recruitSalary: '',
        city: '',
        recruitType: '',
        welfare: [],
        description: '',
        workinghours: ''
      }
    }
  },
  // methods 编写js函数
  methods: {
    notEmpty (val) {
      const re = new RegExp('^[ ]+$')
      return !(val == null || val === '' || typeof (val) === 'undefined' || re.test(val))
    },
    save () {
      if (!this.notEmpty(this.recruit_data.title)) {
        return Toast('请输入职位名称')
      }
      if (!this.notEmpty(this.recruit_data.recruitNum)) {
        return Toast('请输入招聘人数')
      }
      if (!this.notEmpty(this.recruit_data.workinghours)) {
        return Toast('请输入工作时长')
      }
      if (!this.notEmpty(this.recruit_data.recruitSalary)) {
        return Toast('请选择薪资范围')
      }
      if (!this.notEmpty(this.recruit_data.eduBgd)) {
        return Toast('请选择学历要求')
      }
      if (!this.notEmpty(this.recruit_data.workYear)) {
        return Toast('请选择工作年限')
      }
      if (!this.notEmpty(this.recruit_data.city)) {
        return Toast('请选择工作城市')
      }
      if (!this.notEmpty(this.recruit_data.positionId)) {
        return Toast('请选择职位种类')
      }
      if (!this.notEmpty(this.recruit_data.recruitType)) {
        return Toast('请选择职位类型')
      }
      if (this.recruit_data.welfare.length <= 0) {
        return Toast('请选中福利待遇')
      }
      if (!this.notEmpty(this.recruit_data.description)) {
        return Toast('请输入职位描述')
      }
      if (this.recruit_data.welfare && this.recruit_data.welfare.length > 0) {//福利待遇必须选择一个，长度大于0，说明选中
        let welfares = this.recruit_data.welfare
        let saveWelfares = ''
        for (let i = 0; i < welfares.length; i++) {
          saveWelfares += welfares[i] + ',' //前台其实是数组，但是无逗号，后端需要拼接逗号在数组里，主要是用于后端
        }
        if (saveWelfares.length > 0) { //去除最后一位逗号
          saveWelfares = saveWelfares.substring(0, saveWelfares.length - 1)
        }
        this.recruit_data.welfare = saveWelfares
      }
      this.$http({
        method: 'post',
        url: Vue.prototype.AppURL + '/comuser/update/recruit/date',
        data: this.recruit_data
      }).then(({ data }) => {
        console.log(data)
        if (data) {
          Toast('操作成功')
        } else {
          Toast('操作异常')
        }
        this.$router.push({name: 'manage'})
      })
    },
    addressChange (picker, values) {
      if (this.regionInit) {
        // 给市、县赋值
        picker.setSlotValues(1, this.getCityArr(values[0]['name']))
        picker.setSlotValues(2, this.getCountyArr(values[0]['name'], values[1]['name']))
        // 取值并赋值
        if (values[2] && values[2]['name']) {
          cityValue = picker.values[2]['name']
          cityCode = picker.values[2]['code']
        }
      } else {
        this.regionInit = true
        cityValue = values[2]['name']
        cityCode = values[2]['code']
      }
      console.log(cityValue, "======", cityCode)
    },
    getProvinceArr () {
      let provinceArr = []
      threeLevelAddress.forEach(function (item) {
        let obj = {}
        obj.name = item.name
        obj.code = item.code
        provinceArr.push(obj)
      })
      return provinceArr
    },
    // 遍历json，返回市级对象数组
    getCityArr (province) {
      let cityArr = []
      threeLevelAddress.forEach(function (item) {
        if (item.name === province) {
          item.children.forEach(function (args) {
            let obj = {}
            obj.name = args.name
            obj.code = args.code
            cityArr.push(obj)
          })
        }
      })
      return cityArr
    },
    // 遍历json，返回县级对象数组
    getCountyArr (province, city) {
      let countyArr = []
      threeLevelAddress.forEach(function (item) {
        if (item.name === province) {
          item.children.forEach(function (args) {
            if (args.name === city) {
              args.children.forEach(function (param) {
                let obj = {}
                obj.name = param.name
                obj.code = param.code
                countyArr.push(obj)
              })
            }
          })
        }
      })
      return countyArr
    },
    getCountyData (province, city, xian) {
      let obj = {}
      threeLevelAddress.forEach(function (item) {
        if (item.code === province) {
          item.children.forEach(function (args) {
            if (args.code === city) {
              args.children.forEach(function (param) {
                if (xian === param.code) {
                  obj.name = param.name
                  obj.code = param.code
                }
              })
            }
          })
        }
      })
      return obj
    },
    back () {
      this.$router.push({name: 'manage'})
    },
    act (item, i) {
      this.welfare[i].type = !this.welfare[i].type

      if (this.recruit_data.welfare.indexOf(item.id) > -1) {
        this.recruit_data.welfare.splice(i, 1)
      } else {
        console.log("=====", this.recruit_data.welfare, item.id, item)
        this.recruit_data.welfare.push(item.id)
      }
    },
    prop (i) {
      if (i === 0) {
        this.postIf = !this.postIf
      } else if (i === 1) {
        this.cityIf = !this.cityIf
      } else if (i === 2) {
        this.payIf = !this.payIf
      } else if (i === 3) {
        this.stateIf = !this.stateIf
      } else if (i === 4) {
        this.schoolIf = !this.schoolIf
      } else if (i === 5) {
        this.ageIf = !this.ageIf
      }
    },
    postChange (picker, values) {
      let that = this
      if (picker.values[0]) {
        picker.setSlotValues(1, values[0].list2)
        picker.setSlotValues(2, values[1].list3)
        postValue = values[2].positionTitle
        postCode = values[2].id
      }
      if (picker.slots[4].values) {
        let list = picker.slots[4].values
        list.forEach((item) => {
          if (item.id === (this.recruit_data.positionId - 0)) {
            that.postValue = item.positionTitle
          }
        })
      }
    },
    payChange (picker, values) {
      if (picker.values[0]) {
        payValue = picker.values[0]['name']
        payCode = picker.values[0]['id']
      }
      if (picker.slots[0].values) {
        let list = picker.slots[0].values
        list.forEach((item) => {
          if (item.id === (this.recruit_data.recruitSalary - 0)) {
            this.payValue = item.name
          }
        })
      }
    },
    schoolChange (picker, values) {
      if (picker.values[0]) {
        schoolValue = picker.values[0]['name']
        schoolCode = picker.values[0]['id']
      }
      if (picker.slots[0].values) {
        let list = picker.slots[0].values
        list.forEach((item) => {
          if (item.id === (this.recruit_data.eduBgd - 0)) {
            this.schoolValue = item.name
          }
        })
      }
    },
    stateChange (picker, values) {
      if (picker.values[0]) {
        stateValue = picker.values[0]['name']
        stateCode = picker.values[0]['id']
      }
      if (picker.slots[0].values) {
        let list = picker.slots[0].values
        list.forEach((item) => {
          if (item.id === (this.recruit_data.recruitType - 0)) {
            this.stateValue = item.name
          }
        })
      }
    },
    ageChange (picker, values) {
      if (picker.values[0]) {
        ageValue = picker.values[0]['name']
        ageCode = picker.values[0]['id']
      }
      if (picker.slots[0].values) {
        let list = picker.slots[0].values
        list.forEach((item) => {
          if (item.id === (this.recruit_data.workYear - 0)) {
            this.ageValue = item.name
          }
        })
      }
    },
    on (i) {
      if (i === 0) {
        this.postValue = postValue
        this.postValueId = postCode
        this.recruit_data.positionId = postCode
        this.postIf = false
      } else if (i === 1) {
        this.cityValue = cityValue
        this.recruit_data.city = cityCode
        this.cityIf = false
      } else if (i === 2) {
        this.payValue = payValue
        this.recruit_data.recruitSalary = payCode
        this.payIf = false
      } else if (i === 3) {
        this.stateValue = stateValue
        this.recruit_data.recruitType = stateCode
        this.stateIf = false
      } else if (i === 4) {
        this.schoolValue = schoolValue
        this.recruit_data.eduBgd = schoolCode
        this.schoolIf = false
      } else if (i === 5) {
        this.ageValue = ageValue
        this.recruit_data.workYear = ageCode
        this.ageIf = false
      }
    },
    off (i) {
      if (i === 0) {
        postValue = ''
        this.postIf = false
      } else if (i === 1) {
        cityValue = ''
        this.cityIf = false
      } else if (i === 2) {
        payValue = ''
        this.payIf = false
      } else if (i === 3) {
        stateValue = ''
        this.stateIf = false
      } else if (i === 4) {
        schoolValue = ''
        this.schoolIf = false
      } else if (i === 5) {
        ageValue = ''
        this.ageIf = false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
}
.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}
.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}
.inpBox div {
  display: flex;
  align-items: center;
}
.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.inpBoxs .inpBox{
  border: 0;
}
.inpBoxs textarea{
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
.welfareClass{
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  box-sizing: border-box;
  justify-content: flex-end;
}
.welfareClass span{
  padding: 3px 5px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.active{
  background: #3e63a8;
  color: #fff;
  border-color: #3e63a8 !important;
}
</style>
